<template>
	<view>
		<view class="" style="width: 100%;padding: 10rpx 20rpx;">
			<view class="" style="width: 100%;background-color: #ffffff;border-radius: 20rpx;padding: 20rpx 30rpx;">
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition"
					label="手机号码" prop="phone" label-width="150">
					<u-input placeholder="请输入手机号" v-model="phone" type="number"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150">
					<u-input placeholder="请输入验证码" v-model="code" type="text"></u-input>
					<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition"
					label="新密码" prop="phone" label-width="150">
					<u-input placeholder="请输入新密码" v-model="password"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition"
					label="确认密码" prop="phone" label-width="150">
					<u-input placeholder="请确认新密码" v-model="newpassword"></u-input>
				</u-form-item>
			</view>
		</view>
		
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<view class="" style="width: 100%;padding: 0 40rpx;position: absolute;bottom: 150rpx;">
			
			<u-button type="success" @click="okFinsh">确认</u-button>
		</view>
		<!-- <view class="" style="width: 100%;height: 200rpx;background-color: red;color: #ffffff;">{{FILE_SRC_PATH}}</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				labelPosition: 'left',
				code: '',
				codeTips: '获取验证码',
				password: '',
				newpassword: '',
				FILE_SRC_PATH: this.sysConstant.FILE_SRC_PATH,
			};
		},
		methods: {
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					console.log("获取验证码");
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					// setTimeout(() => {
					// uni.hideLoading();
					// // 这里此提示会被this.start()方法中的提示覆盖
					// this.$u.toast('验证码已发送');
					// // 通知验证码组件内部开始倒计时
					// this.$refs.uCode.start();
					// }, 1000);
					uni.request({
						url:this.FILE_SRC_PATH+'/api/sms/getCode',
						// url: 'https://www.lvtianwei.com.cn/prod-api', //仅为示例，并非真实接口地址。
						data: {
							phone: this.phone
						},
						header: {},
						success: (res) => {
							console.log(res);
							if (res.statusCode == 200) {
								uni.hideLoading();
								this.$u.toast('验证码已发送');
								this.$refs.uCode.start();
							} else {
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error',
								})
							}
						}
					});
					// this.$u.get('/api/sms/getCode', {
					// 	phone: this.phone
					// }).then(res => {
					// 	console.log(res)
					// 	if (res.code == 200) {
					// 		uni.hideLoading();
					// 		this.$u.toast('验证码已发送');
					// 		this.$refs.uCode.start();
					// 	} else {
					// 		this.$refs.uToast.show({
					// 			title: res.msg,
					// 			type: 'error',
					// 		})
					// 	}
					// }).catch(() => {
					// 	this.$refs.uToast.show({
					// 		title: "请求失败",
					// 		type: 'error',
					// 	})
					// })
				} else {
					this.$u.toast('倒计时结束后再发送');
				}

			},
			codeChange(text) {
				this.codeTips = text;
			},
			okFinsh() {	
				uni.request({
					url:this.FILE_SRC_PATH+'/api/retrieve/password',
					// url: 'https://www.lvtianwei.com.cn/prod-api/api/retrieve/password', //仅为示例，并非真实接口地址。
					method:"POST",
					data: {
						smsCode: this.code,
						phone: this.phone,
						newPassword: this.newpassword
					},
					header: {},
					success: (res) => {
						console.log(res);
						this.$refs.uToast.show({
							title: "修改成功",
							type: 'success',
						})
						setTimeout(() => {
							uni.redirectTo({
								url:'/pages/common/login'
							})
						}, 1000)
					}
				});
				// this.$u.get('/api/retrieve/password', {
				// 	smsCode: this.code,
				// 	phone:this.phone,
				// 	newPassword:this.newpassword
				// }).then(res => {
				// 	console.log(res)
				// 	if (res.code == 200) {

				// 	} else {
				// 		this.$refs.uToast.show({
				// 			title: res.msg,
				// 			type: 'error',
				// 		})
				// 	}
				// }).catch(() => {
				// 	this.$refs.uToast.show({
				// 		title: "请求失败",
				// 		type: 'error',
				// 	})
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
</style>
